<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">评价管理</view>
		<uni-card class="card" v-for="(item,key) in evaluationList">
			<view class="items">
				<view class="items_top">
					<view class="title">
						{{ item.userName }}
					</view>
					<view class="btn">
						<button style="width: 100px;" @click.stop="goXiangQing(item)">查看详情</button>
					</view>
				</view>
				<view class="items_con">
					<view class="bianhao mb20">
						订单编号：{{ item.order_id }}
					</view>
					<view class="rate mb20">
						<view class="pingfen">
							综合评分：{{item.rate}}分
						</view>
						<uni-rate v-model="item.rate" size="18" />
					</view>
					<view class="time mb20">
						评价时间：{{ formatDate(item.time) }}
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import baseUrl from '../../utils/urlConfig.js'

	const userInfo = uni.getStorageSync('info');
	const evaluationList = ref([]);

	function backPage(){
		uni.navigateBack()
	}

	onMounted(() => {
		uni.request({
		url: baseUrl+'/yyq/evaluation/listByMid/'+userInfo.mid,
    	// method: 'POST', // 根据实际情况选择 GET 或 POST 方法
    	// data:{
    	//   mid:userInfo.mid
    	// },
    	header:{
      		Authorization: uni.getStorageSync('token')
    	},
    	success: res => {
			console.log(res.data.data);
			evaluationList.value = res.data.data;
   		 },
		})
	});

	const goXiangQing = (item) => {
		
		uni.navigateTo({
			url: `/pages/index/pingjia/pjxiangqing/pjxiangqing`,
			events: {
				receiveItem: (data) => {
					console.log('数据已接收', data);
				}
			},
			success: (res) => {
				// 通过事件传递对象
				res.eventChannel.emit('receiveItem', item);
			}
		});
	};

	// 添加日期格式化方法
	const formatDate = (dateString) => {
		const date = new Date(dateString);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');
		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	}
</script>

<style scoped>
	@import url('@/common/app.css');

	.mb20 {
		margin-bottom: 20rpx;
	}

	.card {
		margin: 0;
		height: 350rpx;
	}

	.items {
		height: 300rpx;
		margin: 20rpx 0;

	}

	.items_con {
		padding: 20rpx 0;
	}

	.items_top {
		height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 3px solid lightgray;
	}

	.btn button {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: white;
		background-color: #0863e7;
		border-radius: 60rpx;
		font-size: 26rpx;
	}

	.bianhao {
		color: #0863e7;
	}

	.rate {
		display: flex;
		justify-content: start;
		align-items: center;
		height: 50rpx;
		line-height: 50rpx;
	}

	.pingfen {
		color: black;
		
	}

	.time {
		color: gray;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	  
</style>